/* btn-fx-bubble */
.btn-fx-bubble{
    z-index: 1;
    position: relative;
    font-size: inherit;
    font-family: inherit;
    color: white;
    padding: 0.5em 1em;
    outline: none;
    border: none;
    background-color: hsl(236, 32%, 26%);
    overflow: hidden;
    transition: color 0.4s ease-in-out;
}

.btn-fx-bubble::before {
    content: '';
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: #3cefff;
    transform-origin: center;
    transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
    transition: transform 0.45s ease-in-out;
}

.btn-fx-bubble:hover {
    cursor: pointer;
    color: #161616;
}

.btn-fx-bubble:hover::before {
    transform: translate3d(-50%, -50%, 0) scale3d(15, 15, 15);
}
/* btn-fx-jelly */
.btn-fx-jelly {
    z-index: 1;
    font-size: inherit;
    font-family: inherit;
    color: white;
    padding: 0.5em 1em;
    outline: none;
    border: none;
    background-color: hsl(236, 32%, 26%);
}

.btn-fx-jelly:hover {
    cursor: pointer;
    animation: btn-fx-jelly-jelly 0.5s;
}

@keyframes btn-fx-jelly-jelly {
    0%,
    100% {
        transform: scale(1, 1);
    }
    25% {
        transform: scale(0.9, 1.1);
    }
    50% {
        transform: scale(1.1, 0.9);
    }
    75% {
        transform: scale(0.95, 1.05);
    }
}
/* btn-fx-pulse */
.btn-fx-pulse {
    z-index: 1;
    position: relative;
    font-size: inherit;
    font-family: inherit;
    color: white;
    padding: 0.5em 1em;
    outline: none;
    border: none;
    background-color: hsl(236, 32%, 26%);
}

.btn-fx-pulse:hover {
    cursor: pointer;
}

.btn-fx-pulse::before {
    content: '';
    z-index: -1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 4px solid hsl(236, 32%, 26%);
    transform-origin: center;
    transform: scale(1);
}

.btn-fx-pulse:hover::before {
    transition: all 0.75s ease-in-out;
    transform-origin: center;
    transform: scale(1.75);
    opacity: 0;
}
/* btn-fx-shine */
.btn-fx-shine {
    z-index: 1;
    position: relative;
    font-size: inherit;
    font-family: inherit;
    color: white;
    padding: 0.5em 1em;
    outline: none;
    border: none;
    background-color: hsl(236, 32%, 26%);
    overflow: hidden;
}

.btn-fx-shine::after {
    content: '';
    z-index: -1;
    background-color: hsla(0, 0%, 100%, 0.2);
    position: absolute;
    top: -50%;
    bottom: -50%;
    width: 1.25em;
    transform: translateX(-525%) rotate(35deg);
}

.btn-fx-shine:hover {
    cursor: pointer;
}

.btn-fx-shine:hover::after {
    transition: transform 0.45s ease-in-out;
    transform: translateX(200%) rotate(35deg);
}
/* btn-fx-slide */
.btn-fx-slide {
    z-index: 1;
    position: relative;
    font-size: inherit;
    font-family: inherit;
    color: white;
    padding: 0.5em 1em;
    outline: none;
    border: none;
    background-color: hsl(236, 32%, 26%);
}

.btn-fx-slide::before {
    content: '';
    z-index: -1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fc2f70;
    transform-origin: center right;
    transform: scaleX(0);
    transition: transform 0.25s ease-in-out;
}

.btn-fx-slide:hover {
    cursor: pointer;
}

.btn-fx-slide:hover::before {
    transform-origin: center left;
    transform: scaleX(1);
}

/* input-outline-blue */
.fx-input-outline-blue-div {
    position: relative;
    display: inline-block;
}

.fx-input-outline-blue-input {
    width: 6.5em;
    color: white;
    font-size: inherit;
    font-family: inherit;
    background-color: hsl(236, 32%, 26%);
    padding: 0.35em 0.45em;
    border: 1px solid transparent;
    transition: background-color 0.3s ease-in-out;
}

.fx-input-outline-blue-input:focus {
    outline: none;
}

.fx-input-outline-blue-input::placeholder {
    color: hsla(0, 0%, 100%, 0.6);
}

.fx-input-outline-blue-span {
    position: absolute;
    background-color: #3cefff;
    transition: transform 0.5s ease;
}

.fx-input-outline-blue-bottom,
.fx-input-outline-blue-top {
    height: 1px;
    left: 0;
    right: 0;
    transform: scaleX(0);
}

.fx-input-outline-blue-left,
.fx-input-outline-blue-right {
    width: 1px;
    top: 0;
    bottom: 0;
    transform: scaleY(0);
}

.fx-input-outline-blue-bottom {
    bottom: 0;
    transform-origin: bottom right;
}

.fx-input-outline-blue-input:focus ~ .fx-input-outline-blue-bottom {
    transform-origin: bottom left;
    transform: scaleX(1);
}

.fx-input-outline-blue-right {
    right: 0;
    transform-origin: top right;
}

.fx-input-outline-blue-input:focus ~ .fx-input-outline-blue-right {
    transform-origin: bottom right;
    transform: scaleY(1);
}

.fx-input-outline-blue-top {
    top: 0;
    transform-origin: top left;
}

.fx-input-outline-blue-input:focus ~ .fx-input-outline-blue-top {
    transform-origin: top right;
    transform: scaleX(1);
}

.fx-input-outline-blue-left {
    left: 0;
    transform-origin: bottom left;
}

.fx-input-outline-blue-input:focus ~ .fx-input-outline-blue-left {
    transform-origin: top left;
    transform: scaleY(1);
}

/* fx-input-outline-red */
.fx-input-outline-red-div {
    position: relative;
    display: inline-block;
}

.fx-input-outline-red-input {
    width: 6.5em;
    color: white;
    font-size: inherit;
    font-family: inherit;
    background-color: hsl(236, 32%, 26%);
    padding: 0.35em 0.45em;
    border: 1px solid transparent;
    transition: background-color 0.3s ease-in-out;
}

.fx-input-outline-red-input:focus {
    outline: none;
}

.fx-input-outline-red-input::placeholder {
    color: hsla(0, 0%, 100%, 0.6);
}

.fx-input-outline-red-span {
    position: absolute;
    background-color: #fc2f70;
    transform-origin: center;
    transition: transform 0.5s ease;
}

.fx-input-outline-red-bottom,
.fx-input-outline-red-top {
    height: 1px;
    left: 0;
    right: 0;
    transform: scaleX(0);
}

.fx-input-outline-red-left,
.fx-input-outline-red-right {
    width: 1px;
    top: 0;
    bottom: 0;
    transform: scaleY(0);
}

.fx-input-outline-red-top {
    top: 0;
}

.fx-input-outline-red-bottom {
    bottom: 0;
}

.fx-input-outline-red-left {
    left: 0;
}

.fx-input-outline-red-right {
    right: 0;
}

.fx-input-outline-red-input:focus ~ .fx-input-outline-red-top, .fx-input-outline-red-input:focus ~ .fx-input-outline-red-bottom {
    transform: scaleX(1);
}

.fx-input-outline-red-input:focus ~ .fx-input-outline-red-left, .fx-input-outline-red-input:focus ~ .fx-input-outline-red-right {
    transform: scaleY(1);
}

/* fx-input-underline-red */
.fx-input-underline-red-div {
    position: relative;
    display: inline-block;
}

.fx-input-underline-red-input {
    width: 6.5em;
    color: white;
    font-size: inherit;
    font-family: inherit;
    /* background-color: transparent; */
    background-color: #57346f;
    border: 1px solid transparent;
    border-bottom-color: hsla(341, 97%, 59%, 0.2);
}

.fx-input-underline-red-input:focus {
    outline: none;
}

.fx-input-underline-red-input::placeholder {
    color: hsla(0, 0%, 100%, 0.6);
}

.fx-input-underline-red-span {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    height: 1px;
    opacity: 0;
    background-color: #fc2f70;
    transform-origin: center;
    transform: translate(-50%, 0) scaleX(0);
    transition: all 0.3s ease;
}

.fx-input-underline-red-input:focus ~ .fx-input-underline-red-span {
    transform: translate(-50%, 0) scaleX(1);
    opacity: 1;
}
/* fx-wait-icon-accordion */
.fx-wait-icon-accordion-div {
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    width: 2em;
}

.fx-wait-icon-accordion-span {
    width: 0.3em;
    height: 1em;
    background-color: #3cefff;
}

.fx-wait-icon-accordion-span:nth-of-type(1) {
    animation: fx-wait-icon-accordion-grow 1s -0.45s ease-in-out infinite;
}

.fx-wait-icon-accordion-span:nth-of-type(2) {
    animation: fx-wait-icon-accordion-grow 1s -0.3s ease-in-out infinite;
}

.fx-wait-icon-accordion-span:nth-of-type(3) {
    animation: fx-wait-icon-accordion-grow 1s -0.15s ease-in-out infinite;
}

.fx-wait-icon-accordion-span:nth-of-type(4) {
    animation: fx-wait-icon-accordion-grow 1s ease-in-out infinite;
}

@keyframes fx-wait-icon-accordion-grow {
    0%,
    100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(2);
    }
}

/* fx-wait-icon-diamond */
.fx-wait-icon-diamond-div {
    position: relative;
    display: inline-flex;
    width: 2em;
    height: 2em;
    border: 3px solid #3cefff;
    overflow: hidden;
    animation: fx-wait-icon-diamond-spin 3s ease infinite;
}

.fx-wait-icon-diamond-div::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    width: 2em;
    height: 2em;
    background-color: hsla(185, 100%, 62%, 0.75);
    transform-origin: center bottom;
    transform: scaleY(1);
    animation: fx-wait-icon-diamond-fill 3s linear infinite;
}

@keyframes fx-wait-icon-diamond-spin {
    50%,
    100% {
        transform: rotate(360deg);
    }
}

@keyframes fx-wait-icon-diamond-fill {
    25%,
    50% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}

/* fx-wait-icon-circle */
.fx-wait-icon-circle-box {
    perspective: 120px;
    display: inline-block;
}

.fx-wait-icon-circle-coin {
    width: 2em;
    height: 2em;
    border-radius: 50%;
    border: 4px solid #3cefff;
    animation: fx-wait-icon-circle-spin 1.5s ease-in-out infinite;
}

@keyframes fx-wait-icon-circle-spin {
    to {
        transform: rotateY(540deg);
    }
}

/* fx-wait-icon-dots */
.fx-wait-icon-dots-dots {
    width: 3em;
    height: 3em;
    display: inline-grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
}

.fx-wait-icon-dots-dots > div {
    width: 0.5em;
    height: 0.5em;
    background-color: #3cefff;
    border-radius: 50%;
    animation: fx-wait-icon-dots-fade 1.5s alternate ease-in-out infinite;
}

.fx-wait-icon-dots-dots > div:nth-of-type(2),
.fx-wait-icon-dots-dots > div:nth-of-type(4) {
    animation-delay: 0.25s;
}

.fx-wait-icon-dots-dots > div:nth-of-type(3),
.fx-wait-icon-dots-dots > div:nth-of-type(5),
.fx-wait-icon-dots-dots > div:nth-of-type(7) {
    animation-delay: 0.5s;
}

.fx-wait-icon-dots-dots > div:nth-of-type(6),
.fx-wait-icon-dots-dots > div:nth-of-type(8) {
    animation-delay: 0.75s;
}

.fx-wait-icon-dots-dots > div:nth-of-type(9) {
    animation-delay: 1s;
}

@keyframes fx-wait-icon-dots-fade {
    to {
        opacity: 0.2;
    }
}

/* fx-wait-icon-red-balls */
.fx-wait-icon-red-balls {
    width: 4em;
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}

.fx-wait-icon-red-balls div {
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    background-color: #fc2f70;
}

.fx-wait-icon-red-balls div:nth-of-type(1) {
    transform: translateX(-100%);
    animation: fx-wait-icon-red-left-swing 0.5s ease-in alternate infinite;
}

.fx-wait-icon-red-balls div:nth-of-type(3) {
    transform: translateX(-95%);
    animation: fx-wait-icon-red-right-swing 0.5s ease-out alternate infinite;
}

@keyframes fx-wait-icon-red-left-swing {
    50%,
    100% {
        transform: translateX(95%);
    }
}

@keyframes fx-wait-icon-red-right-swing {
    50% {
        transform: translateX(-95%);
    }
    100% {
        transform: translateX(100%);
    }
}
/* fx-wait-icon-red-spin-stretch */

.fx-wait-icon-red-spin-stretch-div {
    display: inline-block;
    width: 2.5em;
    height: 3em;
    border: 3px solid transparent;
    border-top-color: #fc2f70;
    border-bottom-color: #fc2f70;
    border-radius: 50%;
    animation: fx-wait-icon-red-spin-stretch 2s ease infinite;
}

@keyframes fx-wait-icon-red-spin-stretch {
    50% {
        transform: rotate(360deg) scale(0.4, 0.33);
        border-width: 8px;
    }
    100% {
        transform: rotate(720deg) scale(1, 1);
        border-width: 3px;
    }
}

/* fx-wait-icon-red-dots */
.fx-wait-icon-red-dots {
    width: 3.5em;
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}

.fx-wait-icon-red-dots div {
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    background-color: #fc2f70;
    animation: fx-wait-icon-red-dots-fade 0.8s ease-in-out alternate infinite;
}

.fx-wait-icon-red-dots div:nth-of-type(1) {
    animation-delay: -0.4s;
}

.fx-wait-icon-red-dots div:nth-of-type(2) {
    animation-delay: -0.2s;
}

@keyframes fx-wait-icon-red-dots-fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* fx-wait-icon-red-box-plane-flip */
.fx-wait-icon-red-box-plane-flip-box {
    perspective: 120px;
    display: inline-block;
}

.fx-wait-icon-red-box-plane-flip-plane {
    width: 2em;
    height: 2em;
    background-color: #fc2f70;
    transform: rotate(0);
    animation: fx-wait-icon-red-box-plane-flip-flip 1s infinite;
}

@keyframes fx-wait-icon-red-box-plane-flip-flip {
    50% {
        transform: rotateY(180deg);
    }
    100% {
        transform: rotateY(180deg) rotateX(180deg);
    }
}

/* fx-wait-icon-blue-spin-circle */
.fx-wait-icon-blue-spin-circle-div {
    display: inline-block;
    border: 3px solid hsla(185, 100%, 62%, 0.2);
    border-top-color: #3cefff;
    border-radius: 50%;
    width: 3em;
    height: 3em;
    animation: fx-wait-icon-blue-spin-circle-spin 1s linear infinite;
}

@keyframes fx-wait-icon-blue-spin-circle-spin {
    to {
        transform: rotate(360deg);
    }
}

/* fx-wait-icon-red-circle-svg-dash */

.fx-wait-icon-red-circle-svg-dash-svg {
    width: 3.75em;
    transform-origin: center;
    animation: fx-wait-icon-red-circle-svg-dash-rotate 2s linear infinite;
}

.fx-wait-icon-red-circle-svg-dash-circle {
    fill: none;
    stroke: #fc2f70;
    stroke-width: 2;
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    animation: fx-wait-icon-red-circle-svg-dash-dash 1.5s ease-in-out infinite;
}

@keyframes fx-wait-icon-red-circle-svg-dash-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes fx-wait-icon-red-circle-svg-dash-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dashoffset: -125px;
    }
}

/* fx-span-blue-bars1 */
.fx-span-blue-bars1-span {
    position: relative;
}

.fx-span-blue-bars1-span::before, .fx-span-blue-bars1-span::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #fc2f70;
    transform-origin: center right;
    transform: scaleX(0);
    transition: transform 0.5s ease;
}

.fx-span-blue-bars1-span::before {
    top: 0;
}

.fx-span-blue-bars1-span::after {
    bottom: 0;
}

.fx-span-blue-bars1-span:hover::before, .fx-span-blue-bars1-span:hover::after {
    transform-origin: center left;
    transform: scaleX(1);
}

/* fx-span-red-bars1 */
.fx-span-red-bars1-span {
    position: relative;
}

.fx-span-red-bars1-span::before, .fx-span-red-bars1-span::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #fc2f70;
    transform: scaleX(0);
    transition: transform 0.5s ease;
}

.fx-span-red-bars1-span::before {
    top: 0;
    transform-origin: center right;
}

.fx-span-red-bars1-span:hover::before {
    transform-origin: center left;
    transform: scaleX(1);
}

.fx-span-red-bars1-span::after {
    bottom: 0;
    transform-origin: center left;
}

.fx-span-red-bars1-span:hover::after {
    transform-origin: center right;
    transform: scaleX(1);
}

/* fx-span-blue-bars2 */
.fx-span-blue-bars2-span {
    position: relative;
}

.fx-span-blue-bars2-span::before, .fx-span-blue-bars2-span::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: #3cefff;
    transform-origin: center;
    transform: translateX(-50%) scaleX(0);
    transition: transform 0.4s ease;
}

.fx-span-blue-bars2-span::before {
    top: 0;
}

.fx-span-blue-bars2-span::after {
    bottom: 0;
}

.fx-span-blue-bars2-span:hover::before, .fx-span-blue-bars2-span:hover::after {
    transform: translateX(-50%) scaleX(1);
}

/* fx-span-highlight */
.fx-span-highlight-span {
    position: relative;
    z-index: 1;
}

.fx-span-highlight-span::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: -0.25em;
    right: -0.25em;
    background-color: hsla(341, 97%, 59%, 0.75);
    transform-origin: center right;
    transform: scaleX(0);
    transition: transform 0.2s ease-in-out;
}

.fx-span-highlight-span:hover::before {
    transform: scaleX(1);
    transform-origin: center left;
}
/* fx-span-highlight2 */
.fx-span-highlight2-span {
    position: relative;
    z-index: 1;
}

.fx-span-highlight2-span::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: -0.25em;
    right: -0.25em;
    background-color: #fc2f70;
    transform-origin: bottom center;
    transform: scaleY(0.1);
    transition: all 0.1s ease-in-out;
}

.fx-span-highlight2-span:hover::before {
    transform: scaleY(1);
    background-color: hsla(341, 97%, 59%, 0.75);
}

/* fx-span-overline-1 */
.fx-span-overline-1-span {
    position: relative;
}

.fx-span-overline-1-span::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #3cefff;
    transform-origin: bottom right;
    transform: scaleX(0);
    transition: transform 0.5s ease;
}

.fx-span-overline-1-span:hover::before {
    transform-origin: bottom left;
    transform: scaleX(1);
}
/* fx-span-overline-2 */
.fx-span-overline-2-span {
    position: relative;
}

.fx-span-overline-2-span::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    width: 100%;
    height: 2px;
    opacity: 0;
    background-color: #fc2f70;
    transform-origin: center;
    transform: translate(-50%, 0) scaleX(0);
    transition: all 0.3s ease-in-out;
}

.fx-span-overline-2-span:hover::before {
    transform: translate(-50%, 0) scaleX(1);
    opacity: 1;
}

/* fx-span-pillars-1 */
.fx-span-pillars-1-span {
    position: relative;
}

.fx-span-pillars-1-span::before, .fx-span-pillars-1-span::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #3cefff;
    transform-origin: center top;
    transform: scaleY(0);
    transition: transform 0.5s ease;
}

.fx-span-pillars-1-span::before {
    left: -8px;
}

.fx-span-pillars-1-span::after {
    right: -8px;
}

.fx-span-pillars-1-span:hover::before, .fx-span-pillars-1-span:hover::after {
    transform-origin: center bottom;
    transform: scaleY(1);
}

/* fx-span-pillars-2 */
.fx-span-pillars-2-span {
    position: relative;
}

.fx-span-pillars-2-span::before, .fx-span-pillars-2-span::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #fc2f70;
    transform: scaleY(0);
    transition: transform 0.5s ease;
}

.fx-span-pillars-2-span::before {
    left: -8px;
    transform-origin: center top;
}

.fx-span-pillars-2-span:hover::before {
    transform-origin: center bottom;
    transform: scaleY(1);
}

.fx-span-pillars-2-span::after {
    right: -8px;
    transform-origin: center bottom;
}

.fx-span-pillars-2-span:hover::after {
    transform-origin: center top;
    transform: scaleY(1);
}
/* fx-span-pillars-3 */
.fx-span-pillars-3-span {
    position: relative;
}

.fx-span-pillars-3-span::before, .fx-span-pillars-3-span::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #fc2f70;
    transform-origin: center;
    transform: scaleY(0);
    transition: transform 0.5s ease;
}

.fx-span-pillars-3-span::before {
    left: -8px;
}

.fx-span-pillars-3-span::after {
    right: -8px;
}

.fx-span-pillars-3-span:hover::before, .fx-span-pillars-3-span:hover::after {
    transform: scaleY(1);
}

/* fx-span-Strikethrough-1 */
.fx-span-Strikethrough-1-span {
    position: relative;
}

.fx-span-Strikethrough-1-span::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #fc2f70;
    transform-origin: center right;
    transform: scaleX(0) translateY(-50%);
    transition: transform 0.3s ease;
}

.fx-span-Strikethrough-1-span:hover {
    /* color: hsla(0, 0%, 100%, 0.8); */
    color: hsla(0, 0%, 0%, 0.8);
}

.fx-span-Strikethrough-1-span:hover::before {
    transform-origin: center left;
    transform: scaleX(1) translateY(-50%);
}

/* fx-span-underline-1 */
.fx-span-underline-1-span {
    position: relative;
}

.fx-span-underline-1-span::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #3cefff;
    transform-origin: bottom right;
    transform: scaleX(0);
    transition: transform 0.5s ease;
}

.fx-span-underline-1-span:hover::before {
    transform-origin: bottom left;
    transform: scaleX(1);
}

/* fx-span-underline-2 */
.fx-span-underline-2-span {
    position: relative;
}

.fx-span-underline-2-span::before {
    content: '';
    position: absolute;
    height: 2px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #3cefff;
    transform-origin: bottom left;
    transform: scaleX(1);
    transition: transform 0.3s ease-in-out;
}

.fx-span-underline-2-span:hover::before {
    transform: scaleX(0);
    transform-origin: bottom right;
}

/* fx-span-underline-3 */
.fx-span-underline-3-span {
    position: relative;
}

.fx-span-underline-3-span::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #fc2f70;
    transform-origin: center;
    transform: translate(-50%, 0) scaleX(0);
    transition: transform 0.3s ease-in-out;
}

.fx-span-underline-3-span:hover::before {
    transform: translate(-50%, 0) scaleX(1);
}
